<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/goods/goods_list2.css"/>
    <script type="text/javascript">
        (function () {
            var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
            clientWidth = clientWidth || localStorage.getItem("clientWidth")
            if (clientWidth > 750)
                clientWidth = 750;
            document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
        })();
    </script>
    <style type="text/css">
        html, body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>


<div id="pullrefresh" class=" mui-scroll-wrapper" style=" ">
    <div class="mui-scroll">
        <!--数据列表-->
        <div class="mui-content" style="padding-top: 0;">

            <div class="goods_list">

                <div class="item" v-for="goodsItem in goodsGroup">
                    <a :href="'goods_detail.html?goodsid='+ goodsItem.goodsid">
                        <img :src="goodsItem.pic">
                        <div class="title">
                        	<span class="spcile_price">
                        		<span>优享特卖</span> 
                        	</span>
                        	<span v-html="goodsItem.name"></span></div>
                        <div class="price">
                            <span>￥<span v-html="goodsItem.min_price"></span>元</span>
                            <!--<i><img src="../images/ptsp/car_03.png" alt=""></i>-->
                        </div>
                    </a>
                </div>

            </div>

        </div>
    </div>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/js.js"></script>
<script src="../js/host.config.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var tab = new Vue({
        el: 'header',
        data: {},
        methods: {}
    });
    var app = new Vue({
        el: '.mui-content',
        data: {
            goodsGroup: {},
            has_more_data: true,
        },
        methods: {
            get_data: function (url, cb) {
                // mui.ajax(host_config.host + url, {

                // 	dataType: 'json', //服务器返回json格式数据
                // 	type: 'get', //HTTP请求类型
                // 	timeout: 10000, //超时时间设置为10秒；

                // 	success: function(res) {
                // 		//服务器返回响应，根据响应结果，分析是否登录成功；
                // 		console.log(res);
                // 		if(res.code == 200) {
                // 			cb(res)
                // 		}
                // 	},
                // 	error: function(xhr, type, errorThrown) {
                // 		//异常处理；
                // 		console.log(type);
                // 	}
                // });
            },
            get_more_data: function () {
                var that = this;
                if (this.has_more_data) {
                    this.get_data("/sim_data.search-group-list.json", function (res) {

                        // var new_data = that.search-group-list.concat(res.data);
                        // that.search-group-list = new_data;
                        // //如果是最后一页数据,则将 has_more_data 改为false
                        // that.has_more_data = false;
                    })
                }
            },
            to_detail: function (goodsid) {
                // console.log(goodsid);
                // mui.toast("goods_detail.html")
                // mui.openWindow('goods_detail.html', 'goods_detail.html')
            }
        },
        mounted: function () {
            var _this = this;
            // this.get_data("/sim_data.search-group-list.json", function(res) {
            // 	// that.search-group-list = res.data;
            // 	tap_init();
            // })
            var address = localStorage.getItem("address");
            if(address){address = JSON.parse(address)};

            $.post(url + 'app/goods/goodsclassify', {bid:address.sqid , type: 2}, function (response) {
                var responseData = JSON.parse(response);
                if (responseData.code == '1') {
                    var goodsGroup = responseData.data;
                    console.log(goodsGroup)
                    _this.goodsGroup = goodsGroup;
                }
            });

            // 初始化页面
            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        callback: pulldownRefresh
                    },
                    up: {
                        contentrefresh: '正在加载...',
                        callback: pullupRefresh
                    }
                }
            });
        }
    })

    mui(document).on('tap', 'a', function () {
        mui.openWindow({
        	url:this.href,
        	id:this.href,
        	extras:{
        		youxiang:true
        	}
        })
    })

    function tap_init() {
        function click() {
            this.click();
        }

        mui(".goods_list").on('tap', '.item', click)

    }

    function pulldownRefresh() {
        setTimeout(function () {

            app.get_data("/sim_data.search-group-list.json", function (res) {

                // app.search-group-list = res.data;
            })
            app.has_more_data = true;
            //获取数据成功过后将 列表重新渲染，完成后执行
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //刷新完成
        }, 1000);
    }

    function pullupRefresh() {
        setTimeout(function () {
            // 调用vue实例中的获取更多数据
            app.get_more_data();
            //如果 has_more_data 为false 则表示没有数据了 则调用endPullupToRefresh
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(!app.has_more_data); //参数为true代表没有更多数据了。

        }, 1000);
    }
</script>
</body>

</html>